<template>
	<view class="e-context" v-if="isShow" @click="close()" :style="!isClick ? 'pointer-events: none;':''">
		<view class="dashed-line-box" v-if="isShow" :class="editCurrent.dashedClass" :style="editCurrent.style"></view>
		
		<image class="edit-img" :class="editCurrent.imgClass" src="../../../static/images/edit-img-icon.png" v-if="editCurrent.showImage"></image>
		
		<view class="txt-box" v-if="isShow" :class="editCurrent.flagBtn" :style="editCurrent.txtBoxStyle">
			<view class="e-item" v-for="(item,index) in list" :key="index" :class="{'e-item-null' : !item.id}" @click.stop="act(item)">
				<view class="item-txt">{{item.title}}</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default
	{
		data(){
			return {
				isShow:false,
				editArr:[
						{//页面背景，活动设置
							dashedClass : "dashed-style",
							flagBtn : "flag-btn",
							style:"",
							list:[
								{id:'HDSZ',title:"活动设置"},
								{id:'',title:"|"},
								{id:'BJBJ',title:"编辑背景"}
							],
						},
						
						{//标题
							dashedClass : "title-dashed-style",
							style:"",
							flagBtn : "flag-title",
							list:[
								{page:1,id:'BT_BJNR',title:"编辑内容"},
							],
						},
						{//活动背景更新
							dashedClass : "banner-dashed-style",
							imgClass:"banner-img",
							style:"",
							flagBtn : "flag-banner",
							showImage : false,
							list:[
								{id:'BNNER_UPDATE',title:"更新图片"},
							],
						},
						
						{//页面背景，活动设置
							dashedClass : "parttake-dashed-style",
							flagBtn : "parttake-btn",
							style : "",
							txtBoxStyle:"",
							list:[
								{id:'PART_BJYS',title:"编辑样式"},
								{id:'',title:"|"},
								{id:'PART_BJNR',title:"编辑内容"}
							],
						},
						
						{//产品列表数据上衣
							dashedClass : "gd-dashed-style",
							flagBtn : "parttake-btn",
							style : "",
							txtBoxStyle:"",
							
							list:[
								{id:'move_up',title:"上移"},
								{id:'',title:"|"},
								{id:'move_down',title:"下移"}
							],
						},
						
				    ],
				editId:-1,
				
				editCurrent:{},
				
				list : [],
				isClick:false,
			}
		},
		
		mounted() {
			// this.show(0)
		},
		methods: {
			show(data)
			{
				this.isClick = !this.isClick;
				this.isShow = true;
				this.editCurrent = this.editArr[data.id];
				this.list = this.editArr[data.id].list;
				if(data.id == 2)
				{
					this.editCurrent.showImage = true;
					this.editCurrent.style = "height:"+ data.banHeight + "px;" 
				}
				else if(data.id == 3)
				{
					this.editCurrent.style = "height:30px; top:" + (data.banHeight - 5) + "px;left: 0;right: 0; bottom: 0;margin: 0 auto;";
					this.editCurrent.txtBoxStyle = "top:" + (data.banHeight - 37)+ "px; ";
				}
			},
			
			showDasheBox(data)
			{
				if(this.isClick == true)return;
				if(data.show)
				{
					this.isShow = true;
					this.editCurrent = this.editArr[data.id];
					if(data.id == 2)
					{
						this.editCurrent.style = "height:"+ data.banHeight + "px;" 
					}
					if(data.id == 3)
					{
						this.editCurrent.style = "height:30px; top:" + (data.banHeight - 5) + "px;left: 0;right: 0; bottom: 0;margin: 0 auto;";
						this.editCurrent.txtBoxStyle = "top:" + (data.banHeight - 37)+ "px;";
					}
				}
				else
				{
					this.close();
				}
			},
			
			act(item)
			{
				if(!item.id)return;
				this.$emit("active",item);
			},
			
			close()
			{
				this.isShow = false;
				this.list = [];
				if(this.editCurrent)
				{
					this.editCurrent.showImage = false;
					this.editCurrent = {};
				}
				this.isClick = false;
			},
			
			srollHideWin()
			{
				// if(!this.isClick)
				this.close();
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.e-context{
		position: absolute;
		top : 50px;
		height: 100%;
		width: 100%;
		.txt-box
		{
			background-color: #000;
			color: #FFF;
			border-radius: 6px;
			display: flex;
	
			position: absolute;
			.e-item
			{
				padding: 5px 15px;
				cursor: pointer;
			}
			.e-item-null
			{
				padding: 5px 0px;
			}
		}
		
		.flag-btn
		{
			right: 2px;
			top:4px;
		}
		
		.dashed-line-box
		{
			position: absolute;
			border: 1px #000 dashed;
		}
		
		.edit-img
		{
			width:40px;
			height: 40px;
			position: absolute;
		}
		
		.dashed-style
		{
			height:calc(100% - 151px);
			width: calc(100% - 2px);
			top: 37px;
		}
		
		.title-dashed-style
		{
			height:36px;
			width: calc(100% - 2px);
			top: 0px;
		}
		.flag-title
		{
			right: 2px;
			top:-33px;
		}
		
		.banner-dashed-style
		{
			width: calc(100% - 2px);
			top: 37px;
		}
		
		.banner-img
		{
			left: 2px;
			top:40px;
		}
		
		.flag-banner
		{
			left: 2px;
			top:85px;
		}
		
		.parttake-dashed-style
		{
			width : calc(100% - 70px);
			// top : 10px;
		}
		
		.parttake-btn
		{
			right: 36px;
			// top:50px
		}
		
		.gd-dashed-style
		{
			width : 100%;//calc(100% - 70px);
		}
		
	}
</style>